<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">添加标签</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card>
            <el-card class="AddTag-box-card">
                <h2 class="Regi-title">添加标签</h2>
                <el-form :model="AddTagForm" ref="form" label-width="100px" size="medium">
                    <el-form-item label="标签ID：">
                        <el-input v-model="AddTagForm.tagid" placeholder="输入标签ID"> </el-input>
                        <el-button type="primary" @click="SuiJiFixName" size="mini">随机生成</el-button>
                    </el-form-item>
                    <el-form-item label="货物类型：">
                        <el-select v-model="AddTagForm.fixing" placeholder="选择用户">
                            <a href="/add_fix" class="Add_user">
                                <el-option value="创建货物类型" class="A-option"></el-option>
                            </a>
                            <el-option v-for="fix in FixList" :key="fix.id" :value="fix.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分配用户：">
                        <el-select v-model="AddTagForm.username" placeholder="选择用户">
                            <a href="/add_user" class="Add_user">
                                <el-option value="创建新用户" class="A-option"></el-option>
                            </a>
                            <el-option v-for="user in UserList" :key="user.id" :value="user.username">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="text-align:center;">
                        <el-button type="primary" @click="AddTag" style="width:200px;">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import { user_info_get, fixing_info_get, add_tag_post, fixing_name_get } from '../axios_api/api'
import { config, formatXml } from '../../config'
export default {
    data() {
        return {
            // 添加标签信息
            AddTagForm: {
                tagid: '',
                fixing: '',
                username: '',
            },
            // 用户列表
            UserList: [],
            // 货物类型列表
            FixList: [],
        }
    },
    mounted() {
        this.UserInfo();
        this.GetFixing();
    },
    methods: {
        // 随机获取货物类型名
        SuiJiFixName() {
            fixing_name_get(this.AddTagForm.tagid).then(resp => {
                if (resp.code === 200) {
                    this.AddTagForm.tagid = resp.name
                    this.$message.success(resp.message)
                } else {
                    this.$message.error(resp.message)
                }
            })
        },
        // 添加标签
        AddTag() {
            // 将用户名转换成用户id，以便于后端直接存储数据库
            for (let i = 0; i < this.UserList.length; i++) {
                if (this.AddTagForm.username === this.UserList[i].username) {
                    this.AddTagForm.username = this.UserList[i].id
                }
            }
            // 将货物类型名转换成货物类型id，以便于后端直接存储数据库
            for (let i = 0; i < this.FixList.length; i++) {
                if (this.AddTagForm.fixing === this.FixList[i].name) {
                    this.AddTagForm.fixing = this.FixList[i].id
                }
            }
            let data = { AddTag: this.AddTagForm, token: localStorage.getItem('token') }
            add_tag_post(data).then(resp => {
                if (resp.code === 200) {
                    this.$message.success(resp.message)
										this.$router.push('/tag_info')
                } else {
                    this.$message.error(resp.message)
                }
            })
        },
        // 获取用户列表
        UserInfo() {
            let params = { activeName: '全部', token: localStorage['token'] }
            user_info_get(params).then(resp => {
                if (resp.code === 200) {
                    this.UserList = resp.userinfo
                    console.log(this.UserList)
                }
            })
        },
        // 获取货物类型列表
        GetFixing() {
            fixing_info_get().then(resp => {
                if (resp.code === 200) {
                    this.FixList = resp.fixinfo
                    console.log(this.FixList)
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.Add_user {
    text-decoration: none;
    :link {
        color: red;
        text-decoration: none;
    }
    :visited {
        color: red;
        text-decoration: none;
    }
    :hover {
        color: red;
        text-decoration: none;
    }
    :active {
        color: red;
        text-decoration: none;
    }
    .A-option {
        color: red;
        font-size: 12px;
    }
}
.el-select {
    width: 260px;
}
</style>